import type { FC } from 'react';
import style from './index.less';
import React, { Fragment, useState, useEffect } from 'react';
import Header from './components/Header';
import Achievement from './components/Achievement';
import { Button, Tabs } from 'antd';
import {
  TeamOutlined,
  ConsoleSqlOutlined,
  GatewayOutlined,
  ReadOutlined,
  TranslationOutlined
} from '@ant-design/icons';
import Count from './components/Count';
import Greet from './components/Greet';
import Posts from './components/Posts';
import Python from './components/python';
import CommunityBox from './components/CommunityBox';

import GoHome from '@/components/GoHome';
import { getCommunityAttention } from './service';
interface Props {}
const { TabPane } = Tabs;
const Mine: FC<Props> = () => {
  const [tabkey, setTabKey] = useState(0);
  const [user_id, setUserId] = useState(localStorage.getItem('user_id') || '');
  const username = localStorage.getItem('username');
  const [attention, setAttention] = useState([]);
  const getAttention = async () => {
    const { data } = await getCommunityAttention({ user_id });
    setAttention(data);
    setTabKey(data[0]?.community_id);
  };
  const icons = [
    <TeamOutlined />,
    <ConsoleSqlOutlined />,
    <GatewayOutlined />,
    <ReadOutlined />,
    <TranslationOutlined />,
  ];
  useEffect(() => {
    getAttention();
  }, []);
  return (
    <div className={style.container}>
      {/* 左 */}
      <div className={style.left}>
        <GoHome />
      </div>

      {/* 中 */}
      <div className={style.main}>
        <Achievement />
        <Count />
        <Greet />
        <Posts />
      </div>

      {/* 右 */}
      <div className={style.right}>
        <Header />

        <CommunityBox />

        <div className={style.tab_con}>
          <Tabs
            // 正常来说 key最好别用中文，我这里为了方便key都是中文。
            // defaultActiveKey 默认选中的key
            defaultActiveKey={'全部'}
            // 选择其他Tab
            onChange={key => {
              console.log(key);
              setTabKey(key);
            }}
            style={{ marginTop: '10px', paddingLeft: '10px' }}
          >
            {attention.map((item, index) => (
              <TabPane
                tab={(
                  <span>
                    {icons[index]}
                    {item.community_name}
                  </span>
                )}
                key={item.community_id}
              />
            ))}
          </Tabs>
          <Python tabkey={tabkey} />
        </div>
      </div>
    </div>
  );
};

export default Mine;
